<template>
    <div class="main">
<!--                <a-button @click="change1">1</a-button>-->
<!--                <a-button @click="change2">2</a-button>-->
        <!--    摄像头区域-->
        <div class="cameraArea">
            <!--            当前管理员用户名-->
            <div class="rootName" v-show="store.state.isRoot">{{ store.state.username }}</div>
            <!--            当前会员用户名-->
            <div class="userName" v-show="!store.state.isRoot">{{ store.state.username }}</div>
            <!--            摄像头区域-->
            <div class="cameraAreaBack" v-show="blueBack">
                <div class="cameraAreaBlueBack">
                    <img style="width: 607px" src="../assets/version2.0/cameraBlueBack.png" alt="">
                </div>
                <div class="cameraAreaGreyBack" v-show="cameraClose"></div>
                <img class="cameraLogo" src="../assets/image/camera1.png" alt="" v-show="cameraClose">
                <a-button shape="round" size="large" class="cameraCheckBtn" @click="getCamera"
                          v-show="cameraClose">
                    摄像头检测
                    <img class="magnifyingGlass" src="../assets/version2.0/magnifyingGlass.png" alt=""/>
                </a-button>
            </div>
            <!--            关闭摄像头的按钮-->
            <img id="turnOffCamera" src="../assets/image/closeCamera.png" alt=""
                 @click="shutDownCamera" v-show="!cameraClose">
            <!--            图片流-->
            <img class="video" :src="imageSrc" v-show="camera" alt=""/>
            <!--            截图-->
            <img ref="photo" class="video1" :src="photoSrc" v-show="photo" alt=""/>


        </div>

        <!--    操作区域-->
        <div class="action">
            <!--            wifi图标-->
            <div class="wifiLogo">
                <wifi-logo></wifi-logo>
            </div>
            <!--            电池图标-->
            <div class="batteryLogo">
                <battery-logo></battery-logo>
            </div>
            <!--            标题-->
            <div class="header">
                <img src="../assets/version2.0/header.png" alt=""
                     style="width: 424px;height: 34px;position: relative;margin-left: -5px;">
            </div>
            <!--            轮播图和热图区域--begin-->
            <div id="layoutMedia" style="display: flex;padding-left:8px;padding-top:0;">
                <!--                边框图-->
                <img class="frame" src="../assets/version2.0/border.png" alt=""/>
                <!--                轮播图-->
                <div class="result-image">
                    <img :src="carousel" class="result-image1"  @click="openImgPre(carousel)" alt=" "/>
<!--                    <a-carousel autoplay v-show="ifStartCheck" :dots="!imgPre" effect="fade">-->
<!--                        <img :src="item" class="result-image1" v-for="(item, index) in carousel" @click="openImgPre(item)" :key="index" alt=" "/>-->
<!--                    </a-carousel>-->
<!--                    <img class="result-image1" src="https://api.cgi-gz.com/result/T0114643367/65a3a9fab4036.jpg" alt="">-->
                    <img id="zoom" src="../assets/version2.0/zoom.png" alt="" v-show="!ifStartCheck"/>
                </div>
                <!--                热图-->
                <img ref="myImage" class="frame-3" :src="hotImage" alt="" v-show="hotImage!==''"
                     @click="openImgPre(hotImage)"/>
                <div ref="previewContainer"></div>
                <!--                热图区域的底图-->
                <img class="frame-2" src="../assets/version2.0/frame-2.png" v-show="hotImage===''"
                     style="border-radius: 50%" alt="">
            </div>
            <!--      特征区域--begin-->
            <div class="layoutText">
                <div class="left">
                    <button class="leftButton" @click="leftButton" ref="leftButton">
                        <img src="../assets/version2.0/左耳按钮.png" alt="" v-show="!left">
                        <img src="../assets/version2.0/左耳被按下.png" alt="" v-show="left">
                    </button>
                    <button class="rightButton" @click="rightButton" ref="rightButton">
                        <img src="../assets/version2.0/右耳按钮.png" alt="" v-show="!right">
                        <img src="../assets/version2.0/右耳被按下.png" alt="" v-show="right">
                    </button>
                </div>
                <div class="right">
                    <div class="leftScore">
                        <ScoreCircle :width="120" :height="120" :stroke="circleColor.left"></ScoreCircle>
                        <span class="leftText">{{DNJKF}}</span>
                        <span class="title">耵聍指数</span>
                    </div>
                    <div class="rightScore">
                        <ScoreCircle :width="120" :height="120" :stroke="circleColor.right"></ScoreCircle>
                        <span class="rightText">{{PHF}}</span>
                        <span class="title">偏红指数</span>
                    </div>
                </div>
            </div>
            <!--      特征区域--end-->
            <!--                    按钮区域-->
            <div id="layoutButton">
                <div class="btnTackPic">
                    <div>
                        <img class="cameraBtnLogo" v-show="!photo" src="../assets/image/cameralogo.png" alt="">
                        <a-button id="cameraBtnText" v-show="!photo" @click="takePhoto">定格</a-button>
                        <a-button @click="photoReturn" v-show="photo" id="cameraBackBtnText">返回</a-button>
                    </div>
                </div>
                <div class="btn3">
                    <img class="aiLogo" src="../assets/image/AI图标.png" alt=""/>
                    <a-button @click="aiReport" class="reportText">报告</a-button>
                </div>
                <div class="user" @click="openUserCodeModal">
                    <img class="userLogo" src="../assets/image/userlogo.png" alt=""/>
                    <a-button class="userBtn">用户</a-button>
                </div>
                <div class="btn4">
                    <img class="settingLogo" src="../assets/image/settinglogo.png" alt=""/>
                    <a-button @click="openSetting" class="settingText">设置</a-button>
                </div>
                <!--AI按钮-->
                <a-button class="button-5" @click="startCheck">
                    <img src="../assets/image/button-ai.png" alt="">
                </a-button>
            </div>
        </div>
        <div id="loadingArea" v-show="loading"></div>
        <Loading3QuartersOutlined class="loading" :spin="true" v-show="loading"/>
        <!--    ai报告页面-->
        <a-drawer
                title=""
                width="100%"
                :open="openAiReportModal"
                @close="onclose"
                :body-style="aiReportBody"
                :closable="false">
            <!--            标题区域begin-->
            <div class="headerAi">
                <img class="headerTextAi" src="../assets/version2.0/aiReport/header.png" alt=""/>
            </div>
            <img class="settingHeaderLineAi" src="../assets/version2.0/aiReport/headerLine.png" alt="">
            <!--            标题区域end-->

            <!--            报告内容begin-->
            <div class="reportContent">
                <!--            视图区begin-->
                <div class="reportView">
                    <!--                    标题区-->
                    <div class="reportViewHeader">
                        <img style="width: auto;height: 28px;"
                             src="../assets/version2.0/aiReport/featureHeader.png" alt="">
                        <div class="scoreTitle">AI耳部综合评分</div>
                    </div>
                    <!--        轮播图区域-->
                    <div style="display: flex;margin-top: 20px;justify-content: space-around;padding: 0 70px 0 20px;">
                        <div class="scoreAi">
                            <process-feature base-color="" process-color="" offset="" height="170"
                                             width="170"
                                             :score="allScore">
                            </process-feature>

                        </div>
                        <div class="hexagon">
                            <div style="top: 32px;left: -14px">出血</div>
                            <div style="top: 122px;left: 156px;width: 30px">钙化</div>
                            <div style="top: 122px;left: -12px">穿孔</div>
                            <div style="top: 160px;left: 70px">分泌物</div>
                            <div style="top: 32px;right: -14px;">真菌</div>
                            <div style="top: -10px;left: 66px">琥珀色</div>
                            <hexagon-feature :isFeatureHasScore="!isFeatureHasScore" height="170" width="170" ref="hexagonFeature"
                                             :score-array="scoreArray"></hexagon-feature>
                            <img v-show="isFeatureHasScore" class="notFound" src="../assets/version2.0/aiReport/未见异常.png" alt="">
                        </div>

                    </div>

                    <div style="display: grid;gap: 10px;margin-top: 17px">
                        <div class="featureTextDiv1">
                            <div ref="DN1" style="color: #fff;text-align: center">干净</div>
                            <div ref="PH1" style="color: #fff;">未见异常</div>
                            <!--                            <div style="color: #fff;">偏红</div>-->
                        </div>
                        <div class="featureTextDiv2">
                            <div ref="DN2" style="display: flex;justify-content: center;color: #fff;">少量</div>
                            <div ref="PH2" style="color: #fff;">偏红</div>
                            <!--                            <div style="color: #ff6b6b;">未见异常</div>-->
                        </div>
                        <div class="featureTextDiv3">
                            <div ref="DN3" style="display: flex;justify-content: center;color: #fff;">较多</div>
                            <div ref="PH3" style="display: flex;justify-content: center;color: #fff;">较红</div>
                            <!--                            <div style="color: #fff;">其他异常</div>-->
                        </div>
                        <div class="reportViewMiddleHeader">
                            <img style="width: auto;height: 28px;"
                                 src="../assets/version2.0/aiReport/featureHeader.png" alt="">
                            <div class="scoreMiddleTitle">AI耳部特征分析</div>
                        </div>
                        <div class="featureContainer">
                            <div class="firstRow">
                                <img style="height: 35px" src="../assets/version2.0/aiReport/ear1.png" alt="">
                                <span>耵聍指数</span>
                            </div>
                            <div style="background-color: inherit;width: 85px;height: 85px;border-radius: 14%;border-style: solid;border-color: #3f73a7;position: relative;">
                                <img style="width: 100%;border-radius: 50%;" :src="featureImage" alt="" @click="openImgPre(featureImage)">
<!--                                <img style="width: 100%;border-radius: 50%;" src="https://api.cgi-gz.com/result/T0114643367/65a3a9fab4036.jpg">-->
                                <div v-show="isFeatureHasScore" class="mask"></div>
                                <img v-show="isFeatureHasScore" class="correct" src="../assets/version2.0/aiReport/打勾.png" alt="">
                            </div>
                            <div style="margin-top: 25px;width: 60%;position: relative">
                                <img style="width: 101%;margin-bottom: 15px" src="../assets/version2.0/aiReport/process1.png" alt="">
                                <img ref="signal1" class="signal" src="../assets/version2.0/aiReport/signal.png" alt="">
<!--                                <div class="featureProcess">-->
<!--                                    <div class="progress11" ref="progress1"></div>-->
<!--                                </div>-->
                                <!--                                <process-line :score="DN_Flag" ref="processLine"></process-line>-->
                                <img  class="featureScale" src="../assets/version2.0/aiReport/刻度.png" alt="">
                            </div>
                        </div>
                        <div class="featureContainer">
                            <div class="secondRow">
                                <img style="height: 35px" src="../assets/version2.0/aiReport/ear2.png" alt="">
                                <span>偏红指数</span>
                            </div>
                            <div style="background-color: inherit;width: 85px;height: 85px;border-radius: 14%;border-style: solid;border-color: #3f73a7;position: relative">
                                <img style="width: 100%;border-radius: 50%;" :src="featureImage" alt="" @click="openImgPre(featureImage)">
<!--                                <img style="width: 100%;border-radius: 50%;" src="https://api.cgi-gz.com/result/T0114643367/65a3a9fab4036.jpg">-->
                                <div v-show="isFeatureHasScore" class="mask"></div>
                                <img v-show="isFeatureHasScore" class="correct" src="../assets/version2.0/aiReport/打勾.png" alt="">
                            </div>
                            <div style="margin-top: 25px;width: 60%;position: relative">
                                <img style="width: 101%;margin-bottom: 15px" src="../assets/version2.0/aiReport/process2.png" alt="">
                                <img ref="signal2" class="signal" src="../assets/version2.0/aiReport/signal.png" alt="">
<!--                                <div class="featureProcess">-->
<!--                                    <div class="progress33" ref="progress2"></div>-->
<!--                                </div>-->
<!--                                <process-line :score="MJ_Flag"></process-line>-->
                                <img class="featureScale" src="../assets/version2.0/aiReport/刻度.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
<!--                <img src="../assets/version2.0/aiReport/AI2.png">-->
                <!--            视图区end-->
                <!--            文本区end-->
                <div class="reportTextAi">
                    <div class="reportTextAiHeader">
                        <span>您的智慧护耳报告</span>
                        <div v-show="left">左耳</div>
                        <div v-show="right">右耳</div>
                    </div>
                    <div style="border-top: 2px solid white;width: 100%;height: 0;"></div>
                    <div class="content">
                        <div class="reportTextAiContentFeature">
                            <img style="position: absolute;left: 5px;top: 5px;width: 38px;" src="../assets/version2.0/aiReport/AI1.png">
                            <div class="reportTextAiContentFeatureTitle" style="justify-content: space-between;    margin-left: 40px;">
                                特征分析
                                <span>ID:{{store.state.username}}</span>

                            </div>
                            <div class="featureContent">
                                <div class="left-hotImage">
<!--                                    <img :src="featureImage" alt="" @click="openImgPre(featureImage)">-->
                                    <a-image :src="hotImage" alt=""></a-image>
                                    <!--                                    <img src="https://api.cgi-gz.com/result/T0112819277/65a13429abbf4.jpg" alt="">-->
                                </div>
                                <div class="right-feature">
                                    <span v-for="(item,index) in flag" :key="index">{{ item }}</span>
                                </div>
                            </div>
                        </div>
                        <div class="reportTextAiContentJudge">

                            <div class="reportTextAiContentFeatureTitle" style="margin-top: -9px;    margin-left: 40px;">
                                综合评估
                                <img style="position: absolute;left: -37px;width: 38px;" src="../assets/version2.0/aiReport/AI2.png">

                            </div>
                            <div class="textArea">
                                <p style="margin-bottom: 0" v-for="(item,index) in feature_con"
                                   :key="index">{{ index + 1 }}.{{ item }}</p>
                            </div>
                        </div>
                        <div style="color: grey;font-size: 12px;margin: -9px 3px;">
                            本结果为AI分析得出，不作为临床诊断意见，如有不适，请到正规医院作进一步检查
                        </div>
                        <div class="reportTextAiContentSuggest">
                            <div class="reportTextAiContentFeatureTitle">健康小建议</div>
                            <div class="textArea">
                                <p style="margin-bottom: 0" v-for="(item,index) in checkedData.AI_suggest_con"
                                   :key="index">{{ index + 1 }}.{{ item }}</p>
                            </div>
                        </div>
                        <div class="aiReportAction">
                            <BackButton @click="onclose"></BackButton>
                            <ConfirmButton @click="onclose"></ConfirmButton>
                        </div>
                    </div>
                </div>
                <!--            文本区end-->
            </div>
            <!--            报告内容end-->
        </a-drawer>
        <!--    查询密码框-->
        <check-password ref="checkPass"></check-password>
        <!--    修改密码框-->
        <update-password ref="updatePass" :showUsername="showUserName"></update-password>
        <!--    用户名框-->
        <update-username ref="openUsernameModal" :password="formState.password"/>
        <!--        用户选择or新增-->
        <user-modal ref="userModal"></user-modal>
        <out-type ref="outType"></out-type>
        <!--        设置页面-->
        <setting-page ref="settingPage"></setting-page>
        <!--        图片预览组件-->
        <image-preview ref="imgPre" v-show="imgPre" @click="imgPre=false"></image-preview>

        <device-info></device-info>

        <user-self-test ref="userSelfTest" @check="startCheck"></user-self-test>

    </div>

</template>

<script>

import axios from "axios";
import {message} from "ant-design-vue";
import MD5 from 'MD5'
import {Loading3QuartersOutlined} from '@ant-design/icons-vue'
import CheckPassword from "@/components/checkPassword.vue";
import UpdateUsername from "@/components/updateUsername.vue";
import UpdatePassword from "@/components/updatePassword.vue";
import DeviceInfo from "@/components/deviceInfo.vue";
import UserModal from "@/components/userModal.vue";
import API_BASE_URL from "../../config.js";
import UsersFile from "@/components/usersFile.vue";
import ShutdownConfirmModal from "@/components/shutdownConfirmModal.vue";
import store from "@/store";
import OutType from "@/components/outType.vue";
import {replaceIpAndPort} from "../../utils.js"
import index from "vuex";
import WifiList from "@/components/wifiList.vue";
import {getAction} from "@/manage";
import DoctorResult from "@/components/doctorResult.vue";
import SettingPage from "@/components/settingPage.vue";
import HexagonFeature from "@/components/hexagonFeature.vue";
import ImagePreview from "@/components/imagePreview.vue";
import ScoreCircle from "@/components/svg/ScoreCircle.vue";
import ProcessFeature from "@/components/svg/processFeature.vue";
import BackButton from "@/components/BackButton.vue";
import ConfirmButton from "@/components/ConfirmButton.vue";
import {
    getBatteryInfo,
    getCpuInfo,
    getDeviceInfo,
    getRootCode,
    getRootName, getSerial,
    getWifiInfo,
    loginByDeviceCode,
} from "@/init";
import WifiLogo from "@/components/wifiLogo.vue";
import BatteryLogo from "@/components/batteryLogo.vue";
import LinkStore from "@/components/LinkStore.vue";
import UserSelfTest from "@/components/UserSelfTest.vue";
import ProcessLine from "@/components/svg/processLine.vue";

export default {
    name: "MainPage.vue",
    computed: {
        index() {
            return index
        },
        store() {
            return store
        },
    },
    watch: {},
    components: {
        UserSelfTest,
        DeviceInfo,
        BatteryLogo,
        WifiLogo,
        ConfirmButton,
        BackButton,
        ProcessFeature,
        ScoreCircle,
        ImagePreview,
        HexagonFeature,
        SettingPage,
        OutType,
        UserModal,
        UpdatePassword,
        UpdateUsername,
        CheckPassword,
        Loading3QuartersOutlined,
    },
    data() {
        return {
            url: {
                //检查摄像头
                checkCamera: `${API_BASE_URL}/check-camera`,
                //获取摄像头数据
                getVideoFeed: `${API_BASE_URL}/get_video_feed`,
                //AI检测
                startCheck: `${API_BASE_URL}/start-check`,
                //截图
                getPic: `${API_BASE_URL}/gen-pic`,
                //设置用户信息
                setUserInfo: `${API_BASE_URL}/set-info`,
                // 登录
                login: `${API_BASE_URL}/login`,
                shutdown: `${API_BASE_URL}/shut-down`,
                //获取电池信息
                getBatteryInfo: `${API_BASE_URL}/get-power`,
                //提交识别
                recognize: "http://api.cgi-gz.com/store-testing-report",
            },
            circleColor: {
                left: "#09fff1",
                right: '#ff748e'
            },
            imgPre: false,
            settingBody: {
                'padding': '8px 12px',
                'justify-content': 'center',
            },
            aiReportBody: {
                'padding': '8px 0px',
                'justify-content': 'center',
                overflow: 'hidden'
            },
            checkPassSignal: false,
            wifiSignal: undefined,
            diskUsage: 0,
            ramUsage: 0,
            stopPlayVideo: false,
            UserNameModal: false, //用户名弹框
            open: false,          //诊断报告页面
            openModal: false,     //设置页面
            openPwdModal: false,  //密码弹框
            //显示截图和视频
            photo: false,          //拍照div
            video: false,          //录像div
            camera: false,          //摄像头div
            cameraCheckDisabled: true,  //摄像头检测btn
            cameraTurnOff: false,        //关闭摄像头btn
            loading: false,        //加载动画
            blueBack: true,//蓝色背景
            photoDisabled: true,
            photoSrc: '',          //照片
            videoSrc: '',          //录像
            defaultPassword: "123456",
            password: "123456",       //默认密码
            formState: {password: ''},//获取输入的密码
            changePassword: "",        //要修改的密码
            userName: "",             //输入框获取的用户名
            showUserName: "",         //展示的用户名
            imageSrc: "",
            openAiReportModal: false, //打开AI报告弹窗
            resultImage: "",
            //轮播图
            carousel: '',
            //是否已开始检测
            ifStartCheck: false,
            //是否识别成功
            ifRecognize: false,
            hotImage: '',
            //电池容量
            batterySignal: 0,
            //充电中
            batteryCharging: false,
            featurePics: [],
            //左耳和右耳按钮是否被按下
            left: false,
            right: false,
            //摄像头关闭，摄像头开启
            cameraClose: true,
            formData: null,
            //耳部得分
            // scoreArray: [100, 70, 50, 50, 50, 30],
            scoreArray: [],
            //综合得分
            allScore: 85,
            //特征图
            featureImage: '',
            // AI综合评估
            feature_con:'',
            DN_Flag: 0,
            MJ_Flag: 0,
            //检测后返回的数据
            checkedData: {},
            judgeContent: [],
            DNF:0,
            PHF:0,
            // 症状
            flag:[],
            //是否所有特征都为0分
            isFeatureHasScore: true,
            DNJKF:0,
            // 0：正常，1：左 ear 有异常，2：右 ear 有异常，3：左 ear 有异常，4：右 ear 有异常
        }
    },
    methods: {
        openDeviceInfoModal() {
            this.$refs.deviceInfo.open = true
        },
        // 开始检测
        async startCheck(questionCode) {
            if(this.imageSrc===''){
                message.error("请先检测摄像头是否可用")
                return
            }
            if (store.state.isRoot){
                message.error("请先选择用户")
                return
            }
            if(!this.left&&!this.right){
                message.error("请先选择左耳或者右耳")
                return
            }
            this.loading = true
            //设置参数
            let formData = new FormData();
            // formData.append("age", "10后")
            // formData.append("gender", "man")
            formData.append("serial", store.state.deviceCode)
            formData.append("test_user_id", store.state.userId)
            if(this.left){
                formData.append("ear", "left")
            }
            if (this.right){
                formData.append("ear", "right")
            }
            // formData.append("question_code", questionCode)
            //获取图片
            let imgs = {}

            setTimeout(async () => {

            },800)

            for (let i = 1; i <= 1; i++) {
                //由于await关键字的使用，它会在每次循环中等待异步操作完成后再继续下一次循环。
                await getAction(this.url.getPic).then((res) => {
                    // console.log(img.image_url)
                    let img = `${API_BASE_URL}` + (res.data.data.image_url).slice(21)
                    console.log('当前图片是', img)
                    imgs['img' + i] = img
                })
            }
            message.success("图片采集完成，可以将耳镜移出耳朵")

            for (let i = 1; i <= 1; i++) {
                await fetch(imgs['img' + i]).then(res => res.blob()).then(blob => {
                    let name = 'img'
                    formData.append(name + i, blob, name + i + '.jpg');
                })
            }
            for (let i of formData.entries()) {
                console.log(i)
            }

            fetch(this.url.recognize, {
                method: 'POST',
                body: formData,
                headers: {
                    'Authorization': store.state.token
                }
            }).then(res => {
                return res.json()
            }).then(data => {
                console.log('data', data)
                if (data.status_code === 500) {
                    message.error(data.message)
                } else if (data.data.code === "GM_Not_Exist") {
                    message.error("图片出错，请重新拍摄")
                }else if (data.status_code === 409){
                    message.error(data.message)
                }
                else if (data.data.code === 'Success') {
                    console.log('data', data)
                    if (data.status_code === 409){
                        message.error(data.message)
                    }
                    //识别成功
                    this.ifRecognize = true
                    this.checkedData = data.data

                    let returnData = data.data.returnData

                    this.scoreArray = [
                        returnData.Score.HPSF,
                        returnData.Score.MJF,
                        returnData.Score.GHBF,
                        returnData.Score.FMWF,
                        returnData.Score.CKF,
                        returnData.Score.CXF,
                    ]
                    console.log('scoreArray', this.scoreArray)
                    let c = 0
                    for (let i = 0; i < this.scoreArray.length; i++) {
                        if(this.scoreArray[0]===0){
                            c++
                        }
                    }
                    if(c===6){
                        this.isFeatureHasScore = true
                    }else {
                        this.isFeatureHasScore = false
                    }
                    console.log('c', c)
                    console.log('isFeatureHasScore', this.isFeatureHasScore)

                    this.allScore = returnData.Score.AllJKF
                    this.hotImage = returnData.result_img
                    this.featureImage = returnData.img
                    this.judgeContent = returnData.judgeContent
                    this.feature_con = returnData.feature_con
                    this.DNF = returnData.Score.DNF
                    this.DNJKF = returnData.Score.DNJKF
                    this.PHF = returnData.Score.PHF
                    if (returnData.flag!==null){
                        this.flag = returnData.flag
                    }

                    console.log('检测数据', this.checkedData)
                    console.log('得分数据', this.scoreArray)
                    this.carousel = imgs['img1']
                    message.success("识别成功")
                }


            }).catch(err => {
                console.log('提交识别失败', err)
                message.error('提交识别失败')
            }).finally(() => {
                this.ifStartCheck = true
                this.loading = false
            })


        },
        // eslint-disable-next-line vue/no-dupe-keys
        openUserCodeModal() {
            if (store.state.storeName===''){
                message.error("请先关联店铺")
                return
            }
            this.$refs.userModal.open = true
            this.$refs.userModal.openKey = true
        },
        /**
         * 关闭摄像头
         */
        shutDownCamera() {
            this.cameraClose = true
            this.camera = false
            message.success("摄像头已关闭").then(() => {
                location.reload()
            })
        },
        /**
         * 获取摄像头数据
         */
        getCamera() {
            if (store.state.storeName===''){
                message.error("请先关联店铺")
                return
            }
            getAction(this.url.checkCamera).then((res) => {
                let flag = res.data.data.exist_flag
                if (flag === false) {
                    message.error("摄像头未连接,请先连接摄像头")
                } else {
                    message.success("摄像头可用").then(() => {
                        this.imageSrc = ""
                        this.imageSrc = this.url.getVideoFeed
                        //开启摄像头
                        this.cameraClose = false
                        //打开摄像头画面
                        this.camera = true
                    })

                }
            })
        },
        /**
         * 拍照
         */
        takePhoto() {
            if (this.imageSrc === '') {
                message.error("请先检测摄像头是否可用")
            } else {
                //获取拍摄的照片
                getAction(this.url.getPic).then((res) => {
                    let photo = res.data.data.image_url
                    this.photoSrc = `${API_BASE_URL}` + photo.slice(21)
                    //打开截图，隐藏摄像头
                    this.photo = true
                    this.camera = false
                })
            }
        },
        /**
         * 返回拍照
         */
        photoReturn() {
            //关闭拍照,打开摄像头,启用录像按钮
            this.photo = false
            this.camera = true
        },
        //打开AI报告框
        aiReport() {
            // if (this.imageSrc === '') {
            //     message.error("请先检测摄像头是否可用")
            //     return
            // }
            // 是否开始检测
            // if (this.ifStartCheck&&this.ifRecognize){
                this.openAiReportModal = true;
                this.$nextTick(() => {
                    if (this.DNF>=0&&this.DNF<33){
                        this.$refs.DN1.style.color='rgb(255, 107, 107)'
                        let x= 0
                        let a = setInterval(() => {
                            x+=1
                            this.$refs.signal1.style.left=x+'px'
                            if (x>=(this.DNF*270/100)){
                                clearInterval(a)
                            }
                        },50)
                    }
                    if (this.DNF>=33&&this.DNF<66){
                        this.$refs.DN2.style.color='rgb(255, 107, 107)'
                        let x= 0
                        let a = setInterval(() => {
                            x+=1
                            this.$refs.signal1.style.left=x+'px'
                            if (x>=(this.DNF*270/100)){
                                clearInterval(a)
                            }
                        },50)
                    }
                    if (this.DNF>=66&&this.DNF<=100){
                        this.$refs.DN3.style.color='rgb(255, 107, 107)'
                        let x= 0
                        let a = setInterval(() => {
                            x+=1
                            this.$refs.signal1.style.left=x+'px'
                            if (x>=(this.DNF*270/100)){
                                clearInterval(a)
                            }
                        },50)
                    }

                    if (this.PHF>=0&&this.PHF<33){
                        this.$refs.PH1.style.color='rgb(255, 107, 107)'
                        let x= 0
                        let a = setInterval(() => {
                            x+=1
                            this.$refs.signal2.style.left=x+'px'
                            if (x>=(this.PHF*270/100)){
                                clearInterval(a)
                            }
                        },50)
                    }
                    if (this.PHF>=33&&this.PHF<66){
                        this.$refs.PH2.style.color='rgb(255, 107, 107)'
                        let x= 0
                        let a = setInterval(() => {
                            x+=1
                            this.$refs.signal2.style.left=x+'px'
                            if (x>=(this.PHF*270/100)){
                                clearInterval(a)
                            }
                        },50)
                    }
                    if (this.PHF>=66&&this.PHF<=100){
                        this.$refs.PH3.style.color='rgb(255, 107, 107)'
                        let x= 0
                        let a = setInterval(() => {
                            x+=1
                            this.$refs.signal2.style.left=x+'px'
                            if (x>=(this.PHF*270/100)){
                                clearInterval(a)
                            }
                        },50)
                    }
                })
            // }else {
            //     message.error("请先开始检测")
            // }
            // this.openAiReportModal = true;

            // this.$refs.hexagonFeature.drawScore();
        },
        openSetting() {
            // this.open = true
            this.$refs.settingPage.open = true
        },
        //验证密码
        handleOk() {
            let passwd = MD5(this.formState.password)
            // console.log(pwd)
            axios({
                url: this.url.login,
                method: 'get',
                params: {passwd}
            }).then((res) => {
                if (res.data.message === 'success') {
                    message.success("密码正确，登录成功")
                    this.open = true
                    this.openModal = false
                } else {
                    message.error("密码错误，请重新输入")
                }
            })
        },
        onclose() {
            this.open = false
            this.openAiReportModal = false
            this.formState.password = ''
            this.openwifiList = false
        },
        //检测摄像头
        checkCamera() {
            axios({
                url: this.url.checkCamera,
                method: 'get',
            }).then((res) => {
                return res.data.data.exist_flag
            })
        },
        getWifiInfo() {
            //获取wifi信息
            axios({
                url: this.url.getWifi,
                method: 'get',
            }).then((res) => {
                this.wifiSignal = res.data.data.signal
                store.commit('setWifiName', {value: res.data.data.name})
                store.commit('setWifiSignal', {value: res.data.data.signal})
                console.log("wifiUrl", this.wifiSignal)
                console.log("setWifiName", res.data.data.name)
                console.log("setWifiSignal", res.data.data.signal)
            })
        },
        imagePreview() {
            // 获取图像和预览容器元素
            let image = this.$refs.myImage
            let previewContainer = this.$refs.previewContainer
            previewContainer.style.display = 'block';
            const imageClone = this.cloneNode(true); // 克隆图像元素
            previewContainer.appendChild(imageClone); // 将克隆的图像添加到预览容器中
// 当鼠标离开图像时隐藏预览
            image.addEventListener('mouseout', function () {
                previewContainer.style.display = 'none';
                previewContainer.innerHTML = ''; // 清空预览容器
            });
        },
        // eslint-disable-next-line vue/no-dupe-keys
        leftButton() {
            let left = this.$refs.leftButton
            let right = this.$refs.rightButton
            left.style.setProperty("background-color", "#58d1d9")
            left.style.setProperty("border-color", "white")
            right.style.setProperty("background-color", "rgba(0,0,0,0)")
            right.style.setProperty('border-color', "#9b9b9b")
            this.left = true
            this.right = false
        },
        rightButton() {
            let left = this.$refs.leftButton
            let right = this.$refs.rightButton
            right.style.setProperty("background-color", "#58d1d9")
            right.style.setProperty("border-color", "white")
            left.style.setProperty("background-color", "rgba(0,0,0,0)")
            left.style.setProperty('border-color', "#9b9b9b")
            this.right = true
            this.left = false
        },
        openImgPre(img) {
            this.imgPre = true
            this.$refs.imgPre.hotImage = img
        },

    },
    mounted() {
        if (store.state.sendRequest) {
            getRootCode()
            getRootName()
            getSerial()
            getWifiInfo()
            getCpuInfo()
            getDeviceInfo()
            getBatteryInfo()
            // loginByDeviceCode()
            // 每隔半分钟检查一次电池容量
            setInterval(()=>getBatteryInfo(), 30000)
            // 每隔五分钟检查一次wifi信号
            setInterval(() => {
                getWifiInfo()
            }, 300000)
            //每隔一分钟检查一次CPU温度
            setInterval(() => {
                getCpuInfo()
            }, 600000)
        }

    },

}

</script>

<style scoped>
@import "../css/leftSecond.css";
@import "../css/AiReport.css";
@import "../css/cameraArea.css";
@import "../css/animation.css";

:root {
    --pressBtn--color: #58d1d9;
    --DN-FLag: 50%;
    --ED-FLag: 33%
}

img[src=""] {
    opacity: 0;
}

.userName {
    position: absolute;
    font-size: 1.125em;
    font-weight: 1000;
    left: 0.8em;
    top: 0.7em;
    color: #fff;
    opacity: 0.5;
}

.rootName {
    position: absolute;
    font-size: 1.125em;
    font-weight: 1000;
    left: 0.8em;
    top: 0.7em;
    color: #01f2fe;
    opacity: 0.5;
}

.wifiLogo {
    position: absolute;
    top: 7px;
    right: 60px;
    max-width: 100%;
    height: 18px;
}

.batteryLogo {
    position: absolute;
    top: 10px;
    right: 25px;
    width: 26px;
    height: 17px;
}

/*摄像头检测按钮*/
.cameraCheckBtn {
    position: absolute;
    bottom: 4.5em;
    left: 9em;
    letter-spacing: 2px;
    font-weight: 500;
    font-size: 22px;
    padding-right: 15px;
    padding-bottom: 45px;
}

.magnifyingGlass {
    width: auto;
    height: 33px;
    margin-bottom: 7px;
    margin-left: 6px;
}

/*关闭摄像头按钮*/
#turnOffCamera {
    border-style: hidden;
    background-color: rgba(255, 255, 255, 0);
    position: absolute;
    left: 33em;
    right: 0.4em;
    bottom: 2em;
    letter-spacing: 4px;
    font-weight: 700;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(0.7);
        opacity: 0;
    }
}


.video {
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background-color: rgb(27, 27, 27);
    /*background-image: url('../assets/image/camera.png');*/
    /*background-repeat: no-repeat;*/
    background-position: 50%;
    position: absolute;
    left: 10px;
    top: 10px;
}

.video1 {
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: 50%;
    position: absolute;
    left: 10px;
    top: 10px;
}

.main {
    position: absolute;
    /*background: rgba(222, 212, 212, 0.5);*/
    /*铺满屏幕*/
    min-width: 64em;
    min-height: 37.5em;
    display: flex;
    opacity: 50;
    overflow: hidden;
}

#loadingArea {
    position: absolute;
    right: 0;
    background: rgba(222, 212, 212, 0.5);
    /*铺满屏幕*/
    min-width: 26.5em;
    min-height: 37.5em;
    opacity: 40;
}


/*操作区域*/
.action {
    padding: 12px 6px 15px 6px;
    position: relative;
    width: 26.485em;
    height: 37.5em;
    background: linear-gradient(45deg, #164159, #381758);
    /*background-image: url("../assets/version2.0/actionBack.png");*/
}


/*主按钮区域*/
#layoutButton {
    width: 100%;
    height: 128px;
    padding-left: 8px;
    padding-right: 8px;
    margin-top: 18px;
    position: relative;
}

/*拍照按钮*/
.btnTackPic {
    display: flex;
    align-items: center;
    position: absolute;
    width: 151px;
    height: 61px;
    background: url('../assets/image/takepicback.png') no-repeat;
    background-size: 151px 61px;
    border-style: hidden;
    margin: 0;
}

.btnTackPic span {
    margin-bottom: 5em;
}

/*拍照LOGO*/
.cameraBtnLogo {
    position: relative;
    margin-left: 24px;
    margin-top: -10px;

}

/*拍照按钮的文本：“定格”*/
#cameraBtnText {
    font-weight: 500;
    font-size: 22px;
    border-style: hidden;
    background: rgba(255, 255, 255, 0);
    margin-left: -10px;
    margin-top: -10px;
    letter-spacing: -2px;
}

/*拍照按钮的文本：“返回”*/
#cameraBackBtnText {
    font-weight: 500;
    font-size: 22px;
    border-style: hidden;
    background: rgba(255, 255, 255, 0);
    margin-left: 24px;
    margin-top: -10px;
    letter-spacing: -2px;
}

/*用户logo*/
.userLogo {
    position: relative;
    margin-left: 17px;
    margin-top: -4px;
}

/*用户按钮*/
.userBtn {
    font-weight: 500;
    font-size: 22px;
    border-style: hidden;
    background: rgba(255, 255, 255, 0);
    margin-left: -10px;
    margin-top: -12px;
    letter-spacing: -2px;
}

/*用户*/
.user {
    position: absolute;
    top: 0;
    right: 0;
    background: url('../assets/image/user.png') no-repeat;
    border-style: hidden;
    background-size: 144px 61px;
    font-size: 24px;
    width: 151px;
    height: 61px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.aiLogo {
    position: relative;
    margin-left: 17px;
    margin-top: -4px;
}

.reportText {
    font-weight: 500;
    font-size: 22px;
    color: white;
    border-style: hidden;
    background: rgba(255, 255, 255, 0);
    margin-left: -10px;
    margin-top: -14px;
    letter-spacing: -2px;

}

.notFound{
    width: auto;
    height: 90px;
    position: absolute;
    left: 41px;
    top: 41px;
}

/*ai报告按钮*/
.btn3 {
    font-weight: 1000;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    font-size: 25px;
    width: 151px;
    height: 61px;
    letter-spacing: 0.1em;
    background: url('../assets/image/button-3.png') no-repeat;
    border-style: hidden;
    background-size: 151px 61px;
    color: #fff;
}

.settingLogo {
    position: relative;
    margin-left: -30px;
    margin-top: -4px;
}

.settingText {
    font-weight: 500;
    font-size: 22px;
    letter-spacing: -2px;
    color: black;
    border-style: hidden;
    background: rgba(255, 255, 255, 0);
    margin-left: -10px;
    margin-top: -14px;
}

/*设置按钮*/
.btn4 {
    font-weight: 1000;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    right: 0;
    font-size: 24px;
    width: 151px;
    height: 61px;
    letter-spacing: 0.25em;
    background: url('../assets/image/button-4.png') no-repeat;
    background-size: 144px 61px;
    border-style: hidden;
    padding-left: 48px;
}

/*AI按钮*/
.button-5 {
    justify-content: center;
    align-items: center;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    margin: 0 137px;
    background-color: rgb(0, 0, 0, 0);
    border-style: hidden;
    text-align: left;
}

.button-5 img {
    position: relative;
    right: 21px;
    width: 140px;
    bottom: 10px;
}


/*轮播图和热图结果区域*/
#layoutMedia {
    height: 38%;
    padding: 17px 8px 0;
}


.loading {
    position: absolute;
    right: 1.2em;
    top: 2em;
    color: #fff;
    font-size: 8em;

}

.frame {
    position: absolute;
    width: 24.8em;
    height: 12.7em;
    margin-top: 3px;
}


.result-image {
    margin-top: 23px;
    margin-left: 25px;
    width: 165px;
    height: 165px;
    border-radius: 50%;
    background-color: #2a2a59;
    object-fit: none;
    text-align: center;
    border-color: #01f2fe;
    border-width: 1px;
    border-style: solid;
}

.result-image1 {
    width: 157px;
    height: 157px;
    border-radius: 50%;
    position: relative;
    top: 3px;
}


.frame-2 {
    width: 165px;
    height: 165px;
    margin-left: 1.1em;
    margin-top: 23px;
    background-position: 50%;
}

.frame-3 {
    position: absolute;
    /*background-color: black;*/
    border-radius: 50%;
    width: 165px;
    height: 165px;
    margin-left: 199px;
    margin-top: 16px;

}


#zoom {
    width: 55%;
    height: auto;
    position: relative;
    top: 28px;
    right: 8px;
}

.reference-img1 img {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    margin: 0 0.1875em;
}

.button-back1 span {
    font-size: 1.625em;
    color: #fff;
    margin: 0 0.55em;
}

.result-img1 img {
    width: 7.375em;
    height: 7.375em;
    border-radius: 50%;
    margin: 0 1em;
}

.header {
    justify-content: center;
}


.headerAi {
    justify-content: center;
    display: flex;
}

.headerTextAi {
    width: auto;
    height: 20px;
}

.settingHeaderLineAi {
    width: 100%;
    height: auto;
}

.reportContent {
    width: 100%;
    height: 94%;
    display: flex;
    gap: 20px;
    padding: 5px 20px;
}

.reportView {
    width: 50%;
    height: 100%;
    background: linear-gradient(110deg, #204b7a 10%, #2a3678);
    border-radius: 2%;
}

.reportViewHeader {
    width: 100%;
    height: auto;
    justify-content: center;
    display: grid;
    top: 25px;
    position: relative;
}

.reportViewMiddleHeader {
    width: 100%;
    height: auto;
    justify-content: center;
    display: grid;
    position: relative;
}

.scoreMiddleTitle {
    color: white;
    border-style: hidden;
    position: relative;
    text-align: center;
    bottom: 22px;
}

.reportTextAi {
    width: 50%;
    height: 100%;
    background-color: #ecedea;
    border-radius: 2%;
}


.scoreAi {
    position: relative;
    top: 25px;
}

.scoreTitle {
    color: white;
    border-style: hidden;
    position: relative;
    text-align: center;
    bottom: 22px;
}


.featureContainer {
    display: flex;
    gap: 15px;
    margin-left: 18px;

}

.featureContainer .correct{
    position: absolute;
    width: 45px;
    left: 18px;
    top: 25px;
}

.featureScale {
    width: 280px;
    height: auto;
}

.featureTextDiv1 {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    position: absolute;
    top: 450px;
    left: 229px;
    gap: 80px;
}

.featureTextDiv2 {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    position: absolute;
    top: 450px;
    left: 332px;
    gap: 80px;
}

.featureTextDiv3 {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    position: absolute;
    top: 450px;
    left: 425px;
    gap: 80px;
}



.reportTextAiHeader {
    display: flex;
    justify-content: center;
    font-weight: 1000;
    font-size: 22px;
    margin-top: 10px;
    margin-bottom: 10px;
}


.reportTextAiContentJudge {
    padding: 5px 5px;
    display: grid;
    gap: 5px;
}

.reportTextAiContentSuggest {
    padding: 5px 5px;
    display: grid;
    gap: 5px;
}


</style>
